<script setup lang="ts">
import {reactive, ref} from 'vue';
import {Search, Refresh, Check, Close} from '@element-plus/icons-vue';
import {activeCopyInter, activityIf, changeActiveInter} from "@/api/interface/interFace";
import {activeCopyFn, changeActiveFn, getActivityInfo} from "@/api/system/activity";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
const router = useRouter();

const copyId = ref();
const dialogVisible = ref(false);
const statsSelect = ref('');
const options = [
    {
        value: '0',
        label: '禁止',
    },
    {
        value: '1',
        label: '开启',
    },

];
const activeCopyData = ref<activeCopyInter>({
    largeTurntableId: 0,
    endTime: '',
    status: 0,
    deadLine: '',
    beginTime: '',
    name: ''
});
const form = reactive({
    activeName: '',
    timeRange: '',
    deathTime: '',
    addStatus: 0,
});

const formRef = ref(null);

const rules = {
    activeName: [
        {required: true, message: '请输入用户名', trigger: 'blur'},
    ],
    timeRange: [
        {required: true, message: '请选择时间范围', trigger: 'blur'},
    ],
    deathTime: [
        {required: true, message: '请选择兑换截止时间', trigger: 'blur'},
    ],
};

function submitForm() {
    (formRef as any).value.validate((valid) => {
        if (valid) {
            activeCopyData.value.largeTurntableId = copyId.value;
            activeCopyData.value.endTime = form.timeRange[1];
            activeCopyData.value.beginTime = form.timeRange[0];
            activeCopyData.value.status = form.addStatus;
            activeCopyData.value.name = form.activeName;
            activeCopyData.value.deadLine = form.deathTime;
            activeCopyFn(activeCopyData.value).then(() => {
                console.log('页面重载前');
                ElMessage.success('提交成功');
                dialogVisible.value = false;
                form.timeRange = '';
                form.addStatus = 0;
                form.activeName = '';
                form.deathTime = '';
            });
            setTimeout(function () {
                getActivityInfo(params.value).then(res => {
                    activiteInfo.value.length = 0;
                    console.log('重载页面');
                    activiteInfo.value?.push((res as any).rows);
                    appInfototal.value = (res as any).total;
                });
            }, 100);
        } else {
            ElMessage.error('提交失败');
            return false;
        }
    });
};
const dataPick = ref('');
const activeName = ref('');

let activiteInfo = ref<object[]>([]);
let appInfototal = ref(0);

let searchs = ref<activityIf>({
    name: '',
    pageSize: 10,
    status: '',
    startTime: '',
    endTime: '',
});
let changeActviteData = ref<changeActiveInter>({
    status: '',
    largeTurntableId: '',
});

function reset(): void {
    dataPick.value = '';
    activeName.value = '';
    activiteInfo.value.length = 0;
    statsSelect.value = '';
    searchs.value.name = activeName.value;
    searchs.value.status = statsSelect.value;
    searchs.value.startTime = dataPick.value[0];
    searchs.value.endTime = dataPick.value[1];
    getActivityInfo(searchs.value).then(res => {
        console.log(res);
        activiteInfo.value?.push((res as any).rows);

    });
}

let params = ref<activityIf>({
    pageNum: 1,
    pageSize: 10,
});
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    params.value.pageNum = val;
    activiteInfo.value.length = 0;
    getActivityInfo(params.value).then(res => {
        console.log(res);
        activiteInfo.value?.push((res as any).rows);
    });
};
getActivityInfo(params.value).then(res => {
    console.log(res);
    activiteInfo.value?.push((res as any).rows);
    appInfototal.value = (res as any).total;

});

function searchActInfo() {
    activiteInfo.value.length = 0;
    searchs.value.name = activeName.value;
    searchs.value.status = statsSelect.value;
    searchs.value.startTime = dataPick.value[0];
    searchs.value.endTime = dataPick.value[1];
    console.log(searchs.value.startTime);
    console.log(searchs.value.endTime);
    getActivityInfo(searchs.value).then(res => {
        console.log(res);
        activiteInfo.value?.push((res as any).rows);


    });
}

function setJump(id) {
    router.push({path: '/System/SetActivity', query: {id: id.row.largeTurntableId}});


}

function changeActiveStatus(id) {

    changeActviteData.value.status = id.row.status;
    changeActviteData.value.largeTurntableId = id.row.largeTurntableId;
    (activiteInfo.value[0] as any).forEach((item, index) => {
        if (index !== id.$index && item.status === 1) {
            item.status = 0;
        }

    });
    changeActiveFn(changeActviteData.value).then(() => {
        ElMessage({
            message: '修改成功！',
            type: 'success',
        });
    });

}

function addactiveInfo(id) {
    dialogVisible.value = true;
    copyId.value = id.row.largeTurntableId;
}

function cencelAdd() {
    dialogVisible.value = false;
}


</script>
<template>
    <div>
        <div class="title" style="position: relative">
            <span class="inputTitle">活动名称</span>
            <el-input
                v-model="activeName"
                class="activeName"
                placeholder="请输入活动名称"
                clearable
            />
            <span class="inputTitle">活动状态</span>
            <el-select
                v-model="statsSelect"
                clearable
                placeholder="请选择活动状态"
                style="width: 260px;margin-left: 15px"
            >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <span class="inputTitle" style="margin-left: 50px">活动起止时间</span>
            <el-date-picker
                v-model="dataPick"
                type="daterange"
                value-format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                class="dataInput"
                style="width: 300px"
                :default-value="[new Date(2024, 3, 24), new Date(2024, 3, 24)]"
            />
            <span class="btns">
            <el-button type="primary" :icon="Search" class="serachBtn" @click="searchActInfo">查询</el-button>
            <el-button :icon="Refresh" class="refreshBtn" @click="reset">重置</el-button>
        </span>
        </div>
        <section class='tableBox' style="padding: 0 30px">
            <el-table :data="(activiteInfo[0] as any)" style="width: 100%;margin-top: 50px" stripe>
                <template #empty>
                    <el-empty description="暂无数据"/>
                </template>
                <el-table-column prop="name" label="活动名称" width="180" height/>
                <el-table-column prop="beginTime" label="活动开始时间" width="180" height/>
                <el-table-column prop="endTime" label="活动结束时间" height/>
                <el-table-column prop="status" label="活动状态" height>
                    <template #default="appIndex">
                        <el-switch
                            v-model=appIndex.row.status
                            class="mt-2"
                            style="margin-top: 0"
                            inline-prompt
                            :active-icon="Check"
                            :inactive-icon="Close"
                            :active-value="1"
                            :inactive-value="0"
                            @click="changeActiveStatus(appIndex)"
                        />
                    </template>

                </el-table-column>
                >
                <el-table-column prop="createBy" label="创建人" height/>
                <el-table-column prop="createTime" label="创建时间" height/>
                <el-table-column prop="操作" label="操作" height>
                    <template #default=appIndex>
                        <button style="color: #1c84c6;margin-left: 10px" @click="setJump(appIndex)">设置</button>
                        <button style="color: #1c84c6;margin-left: 10px" @click="addactiveInfo(appIndex)">创建副本</button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <div style="position: relative">
            <span style="margin-left: 1000px;position: absolute;top: 8px">共{{appInfototal}}条数据</span>
            <el-pagination
                style="margin-top: 20px;margin-left: 1150px"
                :page-size="params.pageSize"
                layout="prev, pager, next"
                :total="appInfototal"
                @currentChange="handleCurrentChange"
            />
        </div>

        <el-dialog
            v-model="dialogVisible"
            title="创建副本"
            width="500"
            class="addInfo"
        >
            <el-form :model="form" :rules="rules" ref="formRef">
                <el-form-item label="活动名称：" prop="activeName">
                    <el-input
                        v-model="form.activeName"
                        placeholder="请输入活动名称"
                        clearable
                        size="large"></el-input>
                </el-form-item>
                <el-form-item label="活动时间范围：" prop="timeRange">
                    <el-date-picker
                        v-model="form.timeRange"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        clearable
                        size="large"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item label="兑换截止时间：" prop="deathTime">
                    <el-date-picker
                        v-model="form.deathTime"
                        type="datetime"
                        placeholder="请选择时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        clearable
                        size="large"
                    />
                </el-form-item>
                <el-form-item label="活动状态：" prop="addStatus">
                    <el-switch
                        v-model="form.addStatus"
                        class="ml-2"
                        style="--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6"
                        size="default"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>


            </el-form>
            <template #footer>
                <div class="dialog-footer" style="margin-left: 300px">
                    <el-form-item>
                        <el-button @click="cencelAdd">取消</el-button>
                        <el-button type="primary" @click="submitForm">确定</el-button>
                    </el-form-item>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.addInfo {
    margin-top: 15vh !important;
    width: 40%;
    padding: 20px;
}

.addactiveName {
    width: 60%;
}

.btnClass {
    color: rgb(204, 196, 207) !important;
    cursor: no-drop;
}

.el-table .el-table__cell {
    padding: 18px !important;
}

.dialog {
    padding: 30px;
}

.cell {
    text-align: center !important;
    font-size: 14px;
}

.common-layout {
    margin-top: 40px;
    padding: 0 20px;
}

.el-header {
    background-color: rgb(248, 248, 249);
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    padding: 0 70px;
    line-height: 44px;
    border-bottom: 1px solid #d9d9d9;
}

.ulTitle {
    display: flex;
    justify-content: space-between;
}
li {
    list-style: none;
    float: left;
}

.btns {
    margin-left: 80px;
    position: absolute;
    bottom: -10px;
}

.serachBtn, .refreshBtn {
    width: 73px !important;
    height: 28px !important;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.title {
    height: 65px;
    border-bottom: 1px solid rgb(237, 237, 237);
    line-height: 65px;
    padding: 0 45px;
    overflow: hidden;
}

.inputTitle {
    font-size: 14px;
    font-weight: bolder;
    color: #666;

}

.activeName {
    width: 15%;
    margin-left: 15px;
    margin-right: 15px;
    height: 28px;
    font-size: 12px;
}

.el-date-editor .el-range-input {
    font-size: 12px;
}

.el-select-dropdown__item {
    width: 100% !important;
}



/deep/.el-form-item__label {
    width: 26%;
    font-weight: 700;
}
/deep/.cell{
    text-align: center;
}
</style>
